<!-- 用户信息管理 -->
<template>
    <div class="user-management">
        <el-card>
            <Search @getUserList="getAdminList" :paginationData="paginationData"></Search>
            <div class="table">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;" max-height="460px">
                    <el-table-column label="序号" type="index" width="100px" align="center">
                    </el-table-column>
                    <el-table-column prop="avatarUrl" label="头像">
                        <template #default="scope">
                            <img :src="scope.row.avatarUrl" alt="" style="width: 50px;height:50px;border-radius: 50%;">
                        </template>
                    </el-table-column>
                    <el-table-column prop="userAccount" label="账号"></el-table-column>
                    <el-table-column prop="username" label="昵称"></el-table-column>
                    <el-table-column prop="roleName" label="角色"> </el-table-column>
                    <el-table-column prop="userTel" label="电话"> </el-table-column>
                    <el-table-column prop="email" label="邮箱"></el-table-column>
                </el-table>
                <div class="pagination">
                    <!-- 分页器 -->
                    <Pagination :paginationData="paginationData" @getInfo="getAdminList"></Pagination>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import Search from '../../components/search/index.vue'
import Pagination from '../../components/pagination/index.vue'
import { onMounted, ref } from 'vue';
import { reqGetAdminList } from '../../api/user';
import { AllUserInfo, GetPageData } from '../../api/user/type';

// 表格数据
let tableData = ref<AllUserInfo>([])
let key = ref('')
// 存储接口返回的分页器数据
let paginationData = ref({})
onMounted(() => {
    getAdminList()

})
//获取全部 用户 信息
const getAdminList = async (currentpage = 1, pagesize = 10, keyword = '') => {
    key.value = keyword
    let data: GetPageData = {
        pageSize: pagesize,
        currentPage: currentpage,
        keyword
    }

    let result: any = await reqGetAdminList(data)
    if (result.code == 20000) {
        tableData.value = result.data.list
        paginationData.value = result.data
    }

}

</script>

<style lang="scss" scoped>
.user-management {
    .el-form {
        padding: 20px 30px;
    }

    .table {
        margin: 10px 0;

        .el-table {
            font-size: 13px !important;
        }
    }

    .pagination {
        margin-top: 20px;

    }
}
</style>